<script setup>
import { ref, onMounted } from 'vue';
const data = ref([
  {
    id: 1,
    type: 1,
    img: 'http://10.31.71.52:7002/public/static/Homeimg/16.png',
    name: '恒大湖山半岛',
    dz: '北京市石景山区456号',
    date: '2021.4.17-2021.5.17',
    num: '21'
  },
  {
    id: 2,
    type: 2,
    img: 'http://10.31.71.52:7002/public/static/Homeimg/16.png',
    name: '恒大湖山半岛',
    dz: '北京市石景山区456号',
    date: '2021.4.17-2021.5.17',
    num: '11'
  },
  {
    id: 3,
    type: 3,
    img: 'http://10.31.71.52:7002/public/static/Homeimg/16.png',
    name: '恒大湖山半岛',
    dz: '北京市石景山地铁站A口',
    car: '京A34553',
    date: '2021.4.17  9:00',
    phone: '15248373934',
    num: '21',
  }
])
// 团购数据
const groupData = ref(null)
//团购接口 /api/v1/group
const group = () => {
  uni.request({
    method: 'GET',
    url: 'http://10.31.71.52:7002/api/v1/group',
    success: (res) => {
      const zong = [];
      console.log(res.data.data.data);
      res.data.data.data.forEach((t, k) => {
        zong.push({
          id: t.group_id,
          type: t.group_status,
          img: t.img,
          name: t.house_name + t.group_title,
          dz: t.city + t.county + t.address,
          date: t.start_time,
          num: '1' + k + 2,
          car: '京A34553',
          phone: '15248373934',
          end_date: t.end_time
        })
      })
      const bm = zong.filter(t => t.type == '0');
      const yb = zong.filter(t => t.type == '1');
      const yk = zong.filter(t => t.type == null);
      groupData.value = [...bm, ...yb, ...yk]
    }
  })
}

onMounted(() => {
  group()
})

const add = (type, id) => {
  if (type == 0) {
    const item = groupData.value.find(t => t.id == id)
    item.num = Number(item.num) + 1
    item.type = 1
  }
}

</script>

<template>
  <div class="box">
    <div class="item" v-for="(item, index) in groupData" :key="item.id">
      <div v-if="item.type != null" @click="add(item.type, item.id)">
        <div class="dw" :style="item.type == 0 ? 'background: linear-gradient(to right,#fb9c69,#fa7367);'
          : item.type == 1 ? 'background: linear-gradient(to right,#f5ccd2,#f97c7d);' : ''">
          {{ item.type == 0 ? '我要报名' :
            item.type == 1 ? '已报名' : '' }}</div>
        <div style="background: skyblue;border-radius: 10px;">
          <image style="width: 100%;display: block;margin: auto;" :src="item.img" mode="widthFix" />
        </div>
        <p style="font-size: 18px;font-weight: bold;">{{ item.name }}</p>
        <p>{{ item.dz }}</p>
        <p>活动时间：{{ item.date }} <span style="float: right; font-size: 12px;">已报名：{{ item.num }}人</span></p>
      </div>
      <div class="item" v-else>
        <div class="dw" style="background: linear-gradient(to right,#0a79f2,#319dfc);"> {{ item.type == null ? '已开团' : ''
        }}
        </div>
        <div style="background: skyblue;border-radius: 10px;">
          <image style="width: 100%;display: block;margin: auto;" :src="item.img" mode="widthFix" />
        </div>
        <p style="font-size: 18px;font-weight: bold;">{{ item.name }}</p>
        <p>集合地点：{{ item.dz }}</p>
        <p>车辆牌号：{{ item.car }}</p>
        <p>集合时间：{{ item.date }}</p>
        <p>联系电话：{{ item.phone }} <span style="float: right; font-size: 12px;">已报名：{{ item.num }}人</span></p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  width: 100vw;
  height: 100vh;
  font-size: 14px;

  .item {
    width: 90%;
    margin: 10px auto;
    line-height: 30px;
    position: relative;
    border-radius: 10px;
    background: #f0f0f0;
    padding: 10px;
    box-sizing: border-box;

    .dw {
      top: 10px;
      left: 10px;
      position: absolute;
      width: 30%;
      height: 35px;
      text-align: center;
      border-radius: 20px;
      color: #fff;
      line-height: 35px;
      background: pink;

    }
  }
  image{
    border-radius: 10px;
  }
}
</style>
